<template>
  <div class="login-container">
    <!-- 左侧背景及文案区域 -->
    <div class="login-bg">
      <div class="login-banner">
        <div class="banner-logo">
          <img
            src="/b_f4851f2b692a082621c1ad29f0432136.jpg"
            alt="六月月考题"
            class="logo-img"
          />
          <!-- <span class="logo-text">你的专业电子邮局</span> -->
        </div>
        <div class="banner-desc">
          <h2 class="main-title">AI 工具赋能内容创作</h2>
          <p class="sub-title">简化工作流程，做事效率倍增</p>
        </div>
      </div>
    </div>

    <!-- 右侧登录表单区域 -->
    <div class="login-form-wrap">
      <div class="login-form-header">
        <iframe
          frameborder="no"
          border="0"
          marginwidth="0"
          marginheight="0"
          width="80"
          height="86"
          src="//music.163.com/outchain/player?type=2&id=1827600686&auto=1&height=66"
        ></iframe>
        <h3>账号登录</h3>
      </div>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="0"
        class="login-form"
      >
        <el-form-item prop="userAccount">
          <el-input
            v-model="ruleForm.userAccount"
            placeholder="请输入手机号/邮箱"
            clearable
            class="form-input"
          />
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            v-model="ruleForm.password"
            placeholder="请输入密码"
            clearable
            show-password
            class="form-input"
          />
        </el-form-item>

        <!-- 调整该表单 item 的样式，实现复选框靠左、忘记密码靠右 -->
        <el-form-item class="custom-form-item">
          <el-checkbox v-model="autoLogin" class="auto-login">
            30 天内免登录
          </el-checkbox>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            class="login-btn"
            @click="submitForm(ruleFormRef)"
          >
            登录
          </el-button>
          <div class="register-links">
            <el-link type="info" @click="goRegister">注册新账号</el-link>
            <el-link type="info" @click="goForGot">忘记密码</el-link>
          </div>
        </el-form-item>

        <div class="agreement">
          阅读并接受
          <el-link type="primary" @click="openAgreement">《服务条款》</el-link>
          和
          <el-link type="primary" @click="openPrivacy">《隐私政策》</el-link>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { userLogin } from "../api/api";
import type { FormInstance, FormRules } from "element-plus";

const router = useRouter();

interface RuleForm {
  userAccount: string;
  password: string;
}

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  userAccount: "",
  password: "",
});

const autoLogin = ref(false);

const rules = reactive<FormRules<RuleForm>>({
  userAccount: [
    {
      required: true,
      message: "手机号/邮箱不能为空",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "密码不能为空",
      trigger: "blur",
    },
  ],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      userLogin(ruleForm).then((res) => {
        if (res.data.code == 200) {
          let user = res.data.data;
          let token = user.token;
          localStorage.setItem("token", token);
          localStorage.setItem("user", JSON.stringify(user));
          router.push("/home");
        } else {
          ElMessage.error(res.data.msg);
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};

const goRegister = () => {
  router.push("/register");
};

const goForGot = () => {
  router.push("/recover");
};

const openAgreement = () => {
  // 可跳转实际条款页面
  ElMessageBox.alert("服务条款内容...", "服务条款", {
    confirmButtonText: "确认",
    type: "info",
  });
};

const openPrivacy = () => {
  // 可跳转实际隐私政策页面
  ElMessageBox.alert("隐私政策内容...", "隐私政策", {
    confirmButtonText: "确认",
    type: "info",
  });
};
</script>

<style scoped>
/* 登录容器 */
.login-container {
  display: flex;
  min-height: 100vh;
  /* 这里替换成你实际的背景图片链接 */
  background: url("/bg.jpg") no-repeat center center/cover;
}

/* 左侧背景区域 */
.login-bg {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 50px;
  color: #fff;
}

.banner-logo {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}

.logo-img {
  width: 60px;
  height: auto;
  margin-right: 10px;
}

.logo-text {
  font-size: 24px;
  font-weight: bold;
}

.banner-desc .main-title {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 20px;
}

.banner-desc .sub-title {
  font-size: 20px;
  opacity: 0.9;
}

/* 右侧表单区域 */
.login-form-wrap {
  width: 420px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}

.login-form-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-form-header h3 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.login-form {
  width: 100%;
}

.form-input {
  height: 48px;
  font-size: 14px;
}

.input-suffix {
  color: #999;
  margin-right: 10px;
}

/* 自定义表单 item 样式，实现复选框靠左、忘记密码靠右 */
.custom-form-item {
  display: flex;
  justify-content: space-between; /* 两端对齐，复选框靠左，链接靠右 */
  align-items: center;
}

.auto-login {
  font-size: 14px;
  color: #666;
}

.forgot-link {
  font-size: 14px;
}

.login-btn {
  width: 100%;
  height: 48px;
  font-size: 16px;
  margin-bottom: 15px;
}

.register-links {
  text-align: center;
  margin-top: 10px;
}

.register-links el-link {
  margin: 0 10px;
  font-size: 14px;
}

.agreement {
  text-align: center;
  font-size: 12px;
  color: #999;
  margin-top: 20px;
}

.agreement el-link {
  margin: 0 5px;
}
</style>
